<template>
  <div class="w-screen h-screen flex flex-col">
    <AppHeader style="margin-bottom: 0"></AppHeader>

    <div
      class="bg flex-auto flex items-center justify-center bg-cover bg-center bg-no-repeat"
      :style="{ 'background-image': `url(${bg})` }"
    >
      <main class="mb-[50px]">
        <div class="hd mb-[50px]">
          <img
            class="h-[45px] mx-auto pointer-events-none select-none"
            src="~@/assets/title2.png"
            alt=""
          />
        </div>
        <form
          class="search w-[880px] flex h-[65px] rounded-lg overflow-hidden"
          @submit.stop="onSubmit"
        >
          <input
            type="text"
            class="flex-auto px-6 outline-0 text-xl"
            placeholder="输入搜索内容"
          />
          <button
            type="submit"
            class="flex items-center bg-[#8A6E49] px-[40px] text-white text-[20px] select-pointer"
          >
            <img src="~@/assets/search.png" alt="" class="w-[26px] mr-3" />
            搜索
          </button>
        </form>
      </main>
    </div>
  </div>
</template>

<script>
import bg from "@/assets/search-bg.jpg";

export default {
  data() {
    return {
      bg,
    };
  },
  methods: {
    onSubmit() {
      this.$router.replace({ name: "Home", params: { word: "1" } });
    },
  },
};
</script>
